React experimental_useFormStatus: Цялостно ръководство за подобрено управление на форми

            // app/contact-form.jsx (Server Component)
'use server';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';
  // Simulate an asynchronous form submission
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    throw new Error('All fields are required.');
  }

  // In a real application, you would send the data to a server
  console.log('Form data:', { name, email, message });

  return { success: true, message: 'Thank you for your submission!' };
}

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      

        Name:
        
      
      

        Email:
        
      
      

        Message:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {data?.success && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbnRhY3QtZm9ybS5qc3ggKFNlcnZlciBDb21wb25lbnQpCid1c2Ugc2VydmVyJzsKCmltcG9ydCB7IGV4cGVyaW1lbnRhbF91c2VGb3JtU3RhdHVzIGFzIHVzZUZvcm1TdGF0dXMgfSBmcm9tICdyZWFjdC1kb20nOwoKYXN5bmMgZnVuY3Rpb24gaGFuZGxlU3VibWl0KGZvcm1EYXRhKSB7CiAgJ3VzZSBzZXJ2ZXInOwogIC8vIFNpbXVsYXRlIGFuIGFzeW5jaHJvbm91cyBmb3JtIHN1Ym1pc3Npb24KICBhd2FpdCBuZXcgUHJvbWlzZSgocmVzb2x2ZSkgPT4gc2V0VGltZW91dChyZXNvbHZlLCAyMDAwKSk7CgogIGNvbnN0IG5hbWUgPSBmb3JtRGF0YS5nZXQoJ25hbWUnKTsKICBjb25zdCBlbWFpbCA9IGZvcm1EYXRhLmdldCgnZW1haWwnKTsKICBjb25zdCBtZXNzYWdlID0gZm9ybURhdGEuZ2V0KCdtZXNzYWdlJyk7CgogIGlmICghbmFtZSB8fCAhZW1haWwgfHwgIW1lc3NhZ2UpIHsKICAgIHRocm93IG5ldyBFcnJvcignQWxsIGZpZWxkcyBhcmUgcmVxdWlyZWQuJyk7CiAgfQoKICAvLyBJbiBhIHJlYWwgYXBwbGljYXRpb24sIHlvdSB3b3VsZCBzZW5kIHRoZSBkYXRhIHRvIGEgc2VydmVyCiAgY29uc29sZS5sb2coJ0Zvcm0gZGF0YTonLCB7IG5hbWUsIGVtYWlsLCBtZXNzYWdlIH0pOwoKICByZXR1cm4geyBzdWNjZXNzOiB0cnVlLCBtZXNzYWdlOiAnVGhhbmsgeW91IGZvciB5b3VyIHN1Ym1pc3Npb24hJyB9Owp9CgpmdW5jdGlvbiBDb250YWN0Rm9ybSgpIHsKICBjb25zdCB7IHBlbmRpbmcsIGRhdGEsIGVycm9yIH0gPSB1c2VGb3JtU3RhdHVzKCk7CgogIHJldHVybiAoCiAgICA8Zm9ybSBhY3Rpb249e2hhbmRsZVN1Ym1pdH0+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im5hbWUiPk5hbWU6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im5hbWUiIG5hbWU9Im5hbWUiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0iZW1haWwiPkVtYWlsOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0iZW1haWwiIG5hbWU9ImVtYWlsIiBkaXNhYmxlZD17cGVuZGluZ30gLz4KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im1lc3NhZ2UiPk1lc3NhZ2U6PC9sYWJlbD4KICAgICAgICA8dGV4dGFyZWEgaWQ9Im1lc3NhZ2UiIG5hbWU9Im1lc3NhZ2UiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAgICB7cGVuZGluZyA/ICdTdWJtaXR0aW5nLi4uJyA6ICdTdWJtaXQnfQogICAgICA8L2J1dHRvbj4KCiAgICAgIHtlcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+RXJyb3I6IHtlcnJvci5tZXNzYWdlfTwvcD59CiAgICAgIHtkYXRhPy5zdWNjZXNzICYmIDxwIHN0eWxlPXt7IGNvbG9yOiAnZ3JlZW4nIH19PntkYXRhLm1lc3NhZ2V9PC9wPn0KICAgIDwvZm9ybT4KICApOwp9CgpleHBvcnQgZGVmYXVsdCBDb250YWN0Rm9ybTsK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Обяснение:</b></p>

<ol>
  <li><b>'use server':</b> Тази директива обозначава функцията <code>handleSubmit</code> като React Server Action. Server Actions ви позволяват да изпълнявате код от страна на сървъра директно от вашите React компоненти.</li>
  <li><b><code>useFormStatus()</code>:</b> Извикваме hook-а <code>useFormStatus()</code> в компонента <code>ContactForm</code>. Той връща обект със следните свойства:</li>
    <ul>
      <li><code>pending</code>: Булева стойност, която показва дали формата в момента се изпраща.</li>
      <li><code>data</code>: Данни, върнати от Server Action след успешно изпращане.</li>
      <li><code>error</code>: Обект за грешка, ако Server Action хвърли грешка.</li>
    </ul>
  <li><b>Елементи на формата:</b> Формата включва полета за въвеждане на име, имейл и съобщение. Атрибутът <code>disabled</code> е настроен на <code>pending</code>, което не позволява на потребителя да взаимодейства с формата, докато се изпраща.</li>
  <li><b>Бутон за изпращане:</b> Текстът на бутона за изпращане се променя на "Submitting...", когато <code>pending</code> е true.</li>
  <li><b>Съобщения за грешка и успех:</b> Компонентът показва съобщение за грешка, ако има <code>error</code>, и съобщение за успех, ако <code>data.success</code> е true.</li>
</ol>

<h3>Свойства, върнати от <code>useFormStatus</code></h3>

<ul>
  <li><b><code>pending</code>:</b> Булева стойност, която показва дали формата в момента се изпраща. Това е полезно за деактивиране на бутона за изпращане и показване на индикатор за зареждане.</li>
  <li><b><code>data</code>:</b> Данните, върнати от Server Action след успешно изпращане на формата. Това може да бъде всяка сериализируема стойност.
  <li><b><code>error</code>:</b> Обект за грешка, ако Server Action е хвърлил изключение по време на изпращането. Това ви позволява да показвате съобщения за грешки на потребителя.</li>
  <li><b><code>action</code>:</b> Функцията Server Action, която е била извикана. Това може да бъде полезно за идентифициране коя акция е отговорна за текущия статус.</li>
  <li><b><code>formState</code>:</b> (По-рядко срещано) Състоянието на формата, свързано с формата. Това е особено релевантно, когато управлявате състоянието на формата външно.</li>
</ul>

<h2>Разширени случаи на употреба</h2>

<h3>1. Динамична обработка на грешки и валидация</h3>

<p><code>experimental_useFormStatus</code> може да се използва за прилагане на динамична обработка на грешки и валидация. Например, можете да проверите свойството <code>error</code> и да покажете конкретни съобщения за грешки въз основа на типа на възникналата грешка.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>function ContactForm() {
  const { pending, data, error } = useFormStatus();

  let errorMessage = null;

  if (error) {
    if (error.message === 'All fields are required.') {
      errorMessage = 'Please fill out all the required fields.';
    } else {
      errorMessage = 'An error occurred while submitting the form.';
    }
  }

  return (
    <form action={handleSubmit}>
      {/* ... form fields ... */}

      {errorMessage && <p style={{ color: 'red' }}>Error: {errorMessage}</p>}
      {data?.success && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="ZnVuY3Rpb24gQ29udGFjdEZvcm0oKSB7CiAgY29uc3QgeyBwZW5kaW5nLCBkYXRhLCBlcnJvciB9ID0gdXNlRm9ybVN0YXR1cygpOwoKICBsZXQgZXJyb3JNZXNzYWdlID0gbnVsbDsKCiAgaWYgKGVycm9yKSB7CiAgICBpZiAoZXJyb3IubWVzc2FnZSA9PT0gJ0FsbCBmaWVsZHMgYXJlIHJlcXVpcmVkLicpIHsKICAgICAgZXJyb3JNZXNzYWdlID0gJ1BsZWFzZSBmaWxsIG91dCBhbGwgdGhlIHJlcXVpcmVkIGZpZWxkcy4nOwogICAgfSBlbHNlIHsKICAgICAgZXJyb3JNZXNzYWdlID0gJ0FuIGVycm9yIG9jY3VycmVkIHdoaWxlIHN1Ym1pdHRpbmcgdGhlIGZvcm0uJzsKICAgIH0KICB9CgogIHJldHVybiAoCiAgICA8Zm9ybSBhY3Rpb249e2hhbmRsZVN1Ym1pdH0+CiAgICAgIHsvKiAuLi4gZm9ybSBmaWVsZHMgLi4uICovfQoKICAgICAge2Vycm9yTWVzc2FnZSAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+RXJyb3I6IHtlcnJvck1lc3NhZ2V9PC9wPn0KICAgICAge2RhdGE/LnN1Y2Nlc3MgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdncmVlbicgfX0+e2RhdGEubWVzc2FnZX08L3A+fQogICAgPC9mb3JtPgogICk7Cn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>2. Оптимистични актуализации</h3>

<p>Оптимистичните актуализации включват незабавно актуализиране на потребителския интерфейс, сякаш изпращането на формата ще бъде успешно, още преди сървърът да потвърди изпращането. Това може да подобри потребителското изживяване, като направи приложението да изглежда по-отзивчиво. <code>experimental_useFormStatus</code> може да се използва за управление на оптимистични актуализации чрез поддържане на отделна променлива на състоянието за проследяване на оптимистичните данни.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>import { useState } from 'react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';
  // Simulate an asynchronous form submission
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    throw new Error('All fields are required.');
  }

  // In a real application, you would send the data to a server
  console.log('Form data:', { name, email, message });

  return { success: true, message: 'Thank you for your submission!' };
}

function ContactForm() {
  const { pending, data, error } = useFormStatus();
  const [optimisticMessage, setOptimisticMessage] = useState('');

  const handleSubmitOptimistic = async (formData) => {
      setOptimisticMessage('Submitting...');
      const result = await handleSubmit(formData); //Awaits the server action.
      if (result?.success){
        setOptimisticMessage(result.message)
      } else {
          setOptimisticMessage("");
      }

  };
  return (
    <form action={handleSubmitOptimistic}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" disabled={pending} />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" disabled={pending} />
      </div>
      <div>
        <label htmlFor="message">Message:</label>
        <textarea id="message" name="message" disabled={pending} />
      </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {optimisticMessage && <p style={{ color: 'green' }}>{optimisticMessage}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="aW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7CmltcG9ydCB7IGV4cGVyaW1lbnRhbF91c2VGb3JtU3RhdHVzIGFzIHVzZUZvcm1TdGF0dXMgfSBmcm9tICdyZWFjdC1kb20nOwoKYXN5bmMgZnVuY3Rpb24gaGFuZGxlU3VibWl0KGZvcm1EYXRhKSB7CiAgJ3VzZSBzZXJ2ZXInOwogIC8vIFNpbXVsYXRlIGFuIGFzeW5jaHJvbm91cyBmb3JtIHN1Ym1pc3Npb24KICBhd2FpdCBuZXcgUHJvbWlzZSgocmVzb2x2ZSkgPT4gc2V0VGltZW91dChyZXNvbHZlLCAyMDAwKSk7CgogIGNvbnN0IG5hbWUgPSBmb3JtRGF0YS5nZXQoJ25hbWUnKTsKICBjb25zdCBlbWFpbCA9IGZvcm1EYXRhLmdldCgnZW1haWwnKTsKICBjb25zdCBtZXNzYWdlID0gZm9ybURhdGEuZ2V0KCdtZXNzYWdlJyk7CgogIGlmICghbmFtZSB8fCAhZW1haWwgfHwgIW1lc3NhZ2UpIHsKICAgIHRocm93IG5ldyBFcnJvcignQWxsIGZpZWxkcyBhcmUgcmVxdWlyZWQuJyk7CiAgfQoKICAvLyBJbiBhIHJlYWwgYXBwbGljYXRpb24sIHlvdSB3b3VsZCBzZW5kIHRoZSBkYXRhIHRvIGEgc2VydmVyCiAgY29uc29sZS5sb2coJ0Zvcm0gZGF0YTonLCB7IG5hbWUsIGVtYWlsLCBtZXNzYWdlIH0pOwoKICByZXR1cm4geyBzdWNjZXNzOiB0cnVlLCBtZXNzYWdlOiAnVGhhbmsgeW91IGZvciB5b3VyIHN1Ym1pc3Npb24hJyB9Owp9CgpmdW5jdGlvbiBDb250YWN0Rm9ybSgpIHsKICBjb25zdCB7IHBlbmRpbmcsIGRhdGEsIGVycm9yIH0gPSB1c2VGb3JtU3RhdHVzKCk7CiAgY29uc3QgW29wdGltaXN0aWNNZXNzYWdlLCBzZXRPcHRpbWlzdGljTWVzc2FnZV0gPSB1c2VTdGF0ZSgnJyk7CgogIGNvbnN0IGhhbmRsZVN1Ym1pdE9wdGltaXN0aWMgPSBhc3luYyAoZm9ybURhdGEpID0+IHsKICAgICAgc2V0T3B0aW1pc3RpY01lc3NhZ2UoJ1N1Ym1pdHRpbmcuLi4nKTsKICAgICAgY29uc3QgcmVzdWx0ID0gYXdhaXQgaGFuZGxlU3VibWl0KGZvcm1EYXRhKTsgLy9Bd2FpdHMgdGhlIHNlcnZlciBhY3Rpb24uCiAgICAgIGlmIChyZXN1bHQ/LnN1Y2Nlc3MpewogICAgICAgIHNldE9wdGltaXN0aWNNZXNzYWdlKHJlc3VsdC5tZXNzYWdlKQogICAgICB9IGVsc2UgewogICAgICAgICAgc2V0T3B0aW1pc3RpY01lc3NhZ2UoIiIpOwogICAgICB9CgogIH07CiAgcmV0dXJuICgKICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0T3B0aW1pc3RpY30+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im5hbWUiPk5hbWU6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im5hbWUiIG5hbWU9Im5hbWUiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0iZW1haWwiPkVtYWlsOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0iZW1haWwiIG5hbWU9ImVtYWlsIiBkaXNhYmxlZD17cGVuZGluZ30gLz4KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im1lc3NhZ2UiPk1lc3NhZ2U6PC9sYWJlbD4KICAgICAgICA8dGV4dGFyZWEgaWQ9Im1lc3NhZ2UiIG5hbWU9Im1lc3NhZ2UiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAgICB7cGVuZGluZyA/ICdTdWJtaXR0aW5nLi4uJyA6ICdTdWJtaXQnfQogICAgICA8L2J1dHRvbj4KCiAgICAgIHtlcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+RXJyb3I6IHtlcnJvci5tZXNzYWdlfTwvcD59CiAgICAgIHtvcHRpbWlzdGljTWVzc2FnZSAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ2dyZWVuJyB9fT57b3B0aW1pc3RpY01lc3NhZ2V9PC9wPn0KICAgIDwvZm9ybT4KICApOwp9CgpleHBvcnQgZGVmYXVsdCBDb250YWN0Rm9ybTsK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>3. Индикатори за напредък при качване на файлове</h3>

<p>Въпреки че <code>experimental_useFormStatus</code> не предоставя директно актуализации за напредъка при качване на файлове, можете да го комбинирате с други техники за внедряване на индикатори за напредък. Например, можете да използвате API-то на <code>FormData</code>, за да проследявате напредъка на качването на файл и да актуализирате потребителския интерфейс съответно.</p>

<p><b>Забележка:</b> Тъй като този hook работи предимно във връзка със Server Actions, директният достъп до напредъка на качването в самия <code>experimental_useFormStatus</code> е ограничен. Обикновено бихте обработили напредъка на качването в кода на вашия Server Action (ако е възможно, в зависимост от средата) и след това бихте отразили общия статус на изпращане на формата, използвайки <code>experimental_useFormStatus</code>.</p>

<h2>Глобални съображения</h2>

<p>Когато разработвате форми за глобална аудитория, е важно да вземете предвид следното:</p>

<ul>
  <li><b>Локализация:</b> Уверете се, че всички етикети на форми, съобщения за грешки и известия за успех са локализирани на предпочитания от потребителя език. Използвайте библиотеки и рамки за интернационализация (i18n) за ефективно управление на преводите.</li>
  <li><b>Формати на дати и числа:</b> Използвайте подходящи формати за дати и числа въз основа на локала на потребителя. Например, датите може да се форматират като MM/DD/YYYY в САЩ, но като DD/MM/YYYY в много други страни. По същия начин, форматите на числата може да използват различни десетични разделители и разделители за хиляди.</li>
  <li><b>Часови зони:</b> Ако вашата форма включва насрочване или чувствителна към времето информация, имайте предвид часовите зони. Позволете на потребителите да изберат своята часова зона и конвертирайте времената съответно.</li>
  <li><b>Формати на адреси:</b> Форматите на адресите варират значително в различните страни. Осигурете гъвкави полета за адрес, които да отговарят на различни адресни структури.</li>
  <li><b>Достъпност:</b> Уверете се, че вашите форми са достъпни за потребители с увреждания. Използвайте семантични HTML елементи, предоставяйте алтернативен текст за изображения и се уверете, че вашите форми са навигируеми с клавиатура.</li>
  <li><b>Валутни формати:</b> Ако работите с парични стойности, форматирайте валутата по подходящ начин въз основа на местоположението на потребителя. Използвайте валутни символи и конвенции за форматиране, които са познати на потребителя. Например, в САЩ бихте използвали "$1,234.56", докато в Германия може да използвате "1.234,56 €".</li>
  <li><b>Културна чувствителност:</b> Бъдете наясно с културните различия, които могат да повлияят на дизайна на формата. Например, определени цветове или символи могат да имат различно значение в различните култури.</li>
</ul>

<p><b>Пример: Международна форма за адрес</b></p>

<p>Една проста форма за адрес може да предполага адрес в американски стил. Една глобално ориентирана форма трябва да позволява по-голяма гъвкавост.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
 <form>
  <label for="address1">Address Line 1:</label>
  <input type="text" id="address1" name="address1"><br><br>

  <label for="address2">Address Line 2 (Optional):</label>
  <input type="text" id="address2" name="address2"><br><br>

  <label for="city">City:</label>
  <input type="text" id="city" name="city"><br><br>

  <label for="state">State/Province:</label>
  <input type="text" id="state" name="state"><br><br>

  <label for="postalCode">Postal Code:</label>
  <input type="text" id="postalCode" name="postalCode"><br><br>

  <label for="country">Country:</label>
  <select id="country" name="country">
   <option value="USA">United States</option>
   <option value="CAN">Canada</option>
   {/* More country options */}
  </select><br><br>

  <input type="submit" value="Submit">
 </form>
</code>
            <div class="copy-button-container">
              <button 
                data-code="CiA8Zm9ybT4KICA8bGFiZWwgZm9yPSJhZGRyZXNzMSI+QWRkcmVzcyBMaW5lIDE6PC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImFkZHJlc3MxIiBuYW1lPSJhZGRyZXNzMSI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0iYWRkcmVzczIiPkFkZHJlc3MgTGluZSAyIChPcHRpb25hbCk6PC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImFkZHJlc3MyIiBuYW1lPSJhZGRyZXNzMiI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0iY2l0eSI+Q2l0eTo8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0iY2l0eSIgbmFtZT0iY2l0eSI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0ic3RhdGUiPlN0YXRlL1Byb3ZpbmNlOjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJzdGF0ZSIgbmFtZT0ic3RhdGUiPjxicj48YnI+CgogIDxsYWJlbCBmb3I9InBvc3RhbENvZGUiPlBvc3RhbCBDb2RlOjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJwb3N0YWxDb2RlIiBuYW1lPSJwb3N0YWxDb2RlIj48YnI+PGJyPgoKICA8bGFiZWwgZm9yPSJjb3VudHJ5Ij5Db3VudHJ5OjwvbGFiZWw+CiAgPHNlbGVjdCBpZD0iY291bnRyeSIgbmFtZT0iY291bnRyeSI+CiAgIDxvcHRpb24gdmFsdWU9IlVTQSI+VW5pdGVkIFN0YXRlczwvb3B0aW9uPgogICA8b3B0aW9uIHZhbHVlPSJDQU4iPkNhbmFkYTwvb3B0aW9uPgogICB7LyogTW9yZSBjb3VudHJ5IG9wdGlvbnMgKi99CiAgPC9zZWxlY3Q+PGJyPjxicj4KCiAgPGlucHV0IHR5cGU9InN1Ym1pdCIgdmFsdWU9IlN1Ym1pdCI+CiA8L2Zvcm0+Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Подобрения за глобална употреба:</b></p>

<ul>
 <li>Използвайте изчерпателен списък с държави.</li>
 <li>Обмислете динамична настройка на полетата за адрес въз основа на избора на държава (като използвате библиотека или API за валидиране на формата на адреса).</li>
 <li>Позволете трети или повече редове за адрес, тъй като някои държави изискват много специфично форматиране на адреса.</li>
 <li>Разделете "Щат/Провинция/Регион" и "Пощенски код/ZIP код" в отделни полета с ясни етикети, които работят в международен план.</li>
</ul>

<h2>Най-добри практики за използване на <code>experimental_useFormStatus</code></h2>

<ul>
  <li><b>Поддържайте Server Actions прости:</b> Стремете се да поддържате вашите Server Actions фокусирани върху обработката на данни и избягвайте сложни актуализации на потребителския интерфейс директно в действието. Разчитайте на свойството <code>data</code>, върнато от <code>experimental_useFormStatus</code>, за да актуализирате потребителския интерфейс в клиентския компонент.</li>
  <li><b>Обработвайте грешките елегантно:</b> Внедрете стабилна обработка на грешки във вашите Server Actions, за да улавяте потенциални изключения. Използвайте свойството <code>error</code>, за да показвате информативни съобщения за грешки на потребителя.</li>
  <li><b>Осигурете ясна обратна връзка:</b> Използвайте свойството <code>pending</code>, за да предоставите ясна обратна връзка на потребителя, докато формата се изпраща (напр. деактивиране на бутона за изпращане, показване на индикатор за зареждане).</li>
  <li><b>Оптимизирайте производителността:</b> Внимавайте за производителността, особено когато работите с големи форми или сложни Server Actions. Използвайте техники като мемоизация и разделяне на код, за да оптимизирате производителността на вашето приложение.</li>
  <li><b>Обмислете достъпността:</b> Уверете се, че вашите форми са достъпни за всички потребители, включително тези с увреждания. Следвайте насоките за достъпност и използвайте помощни технологии, за да тествате вашите форми.</li>
</ul>

<h2>Алтернативи на <code>experimental_useFormStatus</code></h2>

<p>Въпреки че <code>experimental_useFormStatus</code> предоставя удобен начин за управление на статуса на формата, има и алтернативни подходи, които можете да обмислите:</p>

<ul>
  <li><b>Персонализирано управление на състоянието:</b> Можете ръчно да управлявате статуса на формата, като използвате вградените функции за управление на състоянието на React (напр. <code>useState</code>, <code>useReducer</code>). Този подход предоставя повече гъвкавост, но изисква повече повтарящ се код.</li>
  <li><b>Библиотеки за форми:</b> Библиотеки за форми като Formik, React Hook Form и Final Form предоставят цялостни решения за управление на форми, включително валидация, обработка на изпращането и управление на състоянието.</li>
  <li><b>Библиотеки за управление на състоянието на трети страни:</b> Библиотеки за управление на състоянието като Redux, Zustand и Recoil могат да се използват за централизирано управление на статуса на формата. Този подход е подходящ за по-големи приложения със сложни изисквания за управление на състоянието.</li>
</ul>

<p>Изборът на подход зависи от специфичните изисквания на вашето приложение. <code>experimental_useFormStatus</code> е особено подходящ за приложения, които използват React Server Components и изискват прост и декларативен начин за управление на статуса на формата.</p>

<h2>Заключение</h2>

<p><code>experimental_useFormStatus</code> е ценно допълнение към набора от инструменти на React за изграждане на динамични и отзивчиви форми. Като предоставя централизиран и декларативен начин за управление на статуса на формата, този hook опростява асинхронната обработка на форми, подобрява потребителското изживяване и усъвършенства обработката на грешки. Въпреки че все още е експериментално API, <code>experimental_useFormStatus</code> представлява обещаваща посока за управление на форми в React, особено в контекста на React Server Components. Като разбират неговите характеристики, предимства и най-добри практики, разработчиците могат да използват този hook, за да създават по-стабилни и лесни за употреба форми за глобална аудитория.</p>

<p>Както при всяка експериментална функция, е изключително важно да сте в течение с най-новите разработки и да сте подготвени за потенциални промени в API-то, докато то се развива към стабилна версия. Въпреки това, основните принципи и предимства на <code>experimental_useFormStatus</code> вероятно ще останат актуални, което го прави полезен инструмент за изследване и включване във вашия работен процес на разработка с React.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">experimental_useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">статус на форма</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">управление на форми</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Server Components</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">потребителско изживяване</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">изпращане на форма</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">асинхронни форми</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">прогресивно подобряване</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>